<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <!-- <InputBox @add="fn"/> -->
    <InputBox v-model="task"/>

    <!-- 列表区域 -->
    <ListArea :list="list" @delByIndex="list.splice($event,1)"/>
    
    <!-- 统计和清空 -->
    <StatisticalClearing />
  </section>
</template>

<script>
import InputBox from './components/InputBox.vue'
import ListArea from './components/ListArea.vue'
import EventBus from '@/utils/EventBus.js'
import StatisticalClearing from './components/StatisticalClearing.vue'
//需求1：实现列表渲染
//不父传子，通过给子组件标签设置属性和值
//子组件通过props属性来接收父组件传递过来的属性和值
//4，在子组件中使用props属性配合v-for列表

//需求2：实现删除一条数据
//2.1子组件中通过$emit（）方法，向父组件传递一个自定义事件和实参下标或id
//2.2父组件中，@xxx接收子组件传递过来的实参下标或id
//2.3通过下标或id删除数组中的一条数据

// 需求3: 实现新增
// 3.1 在Header组件定义定义变量,  用来双向绑定
// 3.2 子组件中, 给input框绑定v-model 双向绑定
// 3.3 子组件中, 监听键盘的enter回车事件
// 3.4 子传父 $emit
// 3.5 父组件监听事件, 添加到数组中

export default {
  created(){
    EventBus.$on('add',(task)=>{
      this.list.unshift({
        id:Date.now(),
          title:task
        })
    })
  },
    data() {
        return {
task :'123',
list:[]

          
//本地存储
//LocalStorage 持久化存储Sessionstorage 会话存储：能存5M数据
//取数据：localstorage·getItem('key')
//存数据：localStorage.setItem(‘key'，字符串类型的值)
//Cookie：能存4k数据

      //2。从Localstorage中获取数据，并且转换为数组
          // list:localStorage.getItem('list')?JSON.parse(localStorage.getItem('list')):[]
        };
    },
    // watch:{
    //   //1．监听数据，存入本地存储localstorage中
    //   list(newValue){
    //     localStorage.setItem('list',JSON.stringify(newValue))
       
    //   }
    // },
    components: { InputBox, ListArea, StatisticalClearing },
    methods: {
      fn(task){
this.list.unshift({
  id:Date.now(),
    title:task
  })
      }
}}
</script>

<style>

</style>
